 <template>
	<div class="app">
		<div class="Login">
			<form @submit.prevent="submit_req" method="post" id="login_registered">
	            <input type="text"  placeholder="用户名" v-model="regData.username"/>
	            <input type="text"  placeholder="密码" v-model="regData.psw"/>
	            <input type="text"  placeholder="确认密码" v-model="regData.tpsw"/>
	        </form>
        </div>
	         <button @click="select()" >获取数据</button> 
	         <button @click="insert()" >插入数据</button>
	         <button @click="update()" >更新数据</button> 
	         <button @click="remove()" >删除数据</button>
		<h1>后台数据</h1>
		<table>
			<tr>
				<th>id</th>
				<th>phone</th>
				<th>password</th>
			</tr>
			<tr v-for="k in arr">
				<td>{{k.id}}</td>
				<td>{{k.phone}}</td>
				<td>{{k.psw}}</td>
			</tr>
		</table>
	</div>
</template>

<script>
	
	export default {
		name:'app',
		data(){
			return {
				arr:'',
				regData: { }          			
			}
		},
		
		methods:{
			//获取数据
			select:function(){
			var	str = localStorage.obj; 
				//重新转换为对象 
			var	obj = JSON.parse(str);
				
				 var _this = this;
				axios.get('http://localhost:3000/router/select',{
					params:{
							phone:_this.regData.username ,
							psw:_this.regData.psw,
							condition: sql.username.select
						}
				}).then(function(res){
					console.log(res.data);
					_this.arr = res.data;
				}).catch(function(err){
					console.log(err);
				});
			},
			//插入数据
			insert(){
				var reg_name =  this.regData.username;
	            var reg_psw = this.regData.psw;
	            var obj = {pnone:reg_name, paw:reg_psw}
//	            缓存
				localStorage.name = obj;
				
				var obj = { 
		    			name:reg_name,
		    			password: reg_psw
				}; 
			    var array = [];
				array.push(obj);
			    var str = JSON.stringify(array); 
			    localStorage.obj = str; 
			    
				var _this = this;
	            if(reg_psw !== this.regData.tpsw){
	                alert("两次输入密码不正确！");
	                this.regData.username = "";
	                this.regData.psw = "";
	                this.regData.tpsw = "";
           		}else{           		
				this.axios.get('http://localhost:3000/router/add',{
					params:{
							phone:reg_name,
							psw:reg_psw,
							condition:_this.sql.username.add
						}
				}).then(function(res){
					console.log(res);
					
				}).catch(function(err){
					console.log(err);
				});
            }
		},
		//更新数据
		update(){
			var reg_name =  this.regData.username;
	            var reg_psw = this.regData.psw;	            
	            if(reg_psw !== this.regData.tpsw){
	                alert("两次输入密码不正确！");
	                this.regData.username = "";
	                this.regData.psw = "";
	                this.regData.tpsw = "";
           		}else{           		
				axios.get('http://localhost:3000/router/update',{
					params:{
							phone:reg_name,
							psw:reg_psw,
							id:1,
							condition:sql.username.update
						}
				}).then(function(res){
					console.log(res);
				}).catch(function(err){
					console.log(err);
				});
            }
		},
		//删除数据
		remove(){
			var reg_name =  this.regData.username;
	            var reg_psw = this.regData.psw;	            
	            if(reg_psw !== this.regData.tpsw){
	                alert("两次输入密码不正确！");
	                this.regData.username = "";
	                this.regData.psw = "";
	                this.regData.tpsw = "";
           		}else{           		
				axios.get('http://localhost:3000/router/remove',{
					params:{
							phone:reg_name,
							psw:reg_psw,
							id:1,
							condition:sql.username.remove
						}
				}).then(function(res){
					console.log(res);
				}).catch(function(err){
					console.log(err);
				});
            }
		}

	}	
  }
		
</script>

<style scoped>
	button{
		width: 20rem;
		height: 3rem;
		margin: 0.5rem 7rem ;
		background: pink;
		color: black;
		font-size: 1.5rem;
	}
	table,th,tr,td{
		border: 1px solid black;
	}
	.Login{
        width: 70%;
        height: 70%;
        background: rgba(255,255,255,0.8);
        border: 5px solid #E23A6E;
        margin: 0 auto;
        margin-top: 5%;
    }
    .Login a{
        text-decoration: none;
        color: #E23A6E;
    }
    .Login form{
        width: 100%;
        height: 100%;
    }
    .Login input{
        width: 50%;
        height: 40px;
        margin-top: 30px;
        border: 1px solid #E23A6E;
        border-radius: 20px;
        outline: none;
        font-family: "arial rounded mt bold";
        padding-left: 10px;
        font-size: 18px;
    }
    .sub_btn{
        cursor: pointer;
        background: none;
        color: #E23A6E;
    }
    .sub_btn:hover{
        background: #E23A6E;
        color: #FFFFFF;
    }
</style>